<template>
    <el-aside class="menu_wrap" :width="collapseFlag ? '70px' : '280px'">
        <vue-scroll :ops="$root.scrollOpsY">

            <el-menu
                    class="sidebar-el-menu"
                    :default-active="onRoutes"
                    :collapse="collapseFlag"
                    background-color="rgba(0,0,0,0)"
                    text-color="rgba(255,255,255,0.7)"
                    active-text-color="#ffffff"
                    router
            >
                <template v-for="item in items">
                    <template v-if="item.subs">
                        <el-submenu :index="item.index" :key="item.index">
                            <template slot="title">
                                <i :class="`item-icon ${ item.icon }`"></i>
                                <span slot="title">{{ item.title }}</span>
                            </template>
                            <template v-for="subItem in item.subs">
                                <el-submenu
                                        v-if="subItem.subs"
                                        :index="subItem.index"
                                        :key="subItem.index"
                                >
                                    <template slot="title">{{ subItem.title }}</template>
                                    <el-menu-item
                                            v-for="(threeItem,i) in subItem.subs"
                                            :key="i"
                                            :index="threeItem.index"
                                    >{{ threeItem.title }}</el-menu-item>
                                </el-submenu>
                                <el-menu-item
                                        v-else
                                        :index="subItem.index"
                                        :key="subItem.index"
                                >{{ subItem.title }}</el-menu-item>
                            </template>
                        </el-submenu>
                    </template>
                    <template v-else>
                        <el-menu-item :index="item.index" :key="item.index">
                            <i :class="`item-icon ${ item.icon }`"></i>
                            <span slot="title">{{ item.title }}</span>
                        </el-menu-item>
                    </template>
                </template>
            </el-menu>

        </vue-scroll>

        <img v-if="!collapseFlag"
             class="btn-shrink is_hover"
             src="../assets/images/page/icon_pack_up.png"
             alt=""
             @click.stop="collapseClick()"
        />

        <img v-if="collapseFlag"
             class="btn-shrink is_hover"
             src="../assets/images/page/icon_unfold.png"
             alt=""
             @click.stop="collapseClick()"
        />

    </el-aside>
</template>

<script>
    export default {
        data() {
            return {
                collapseFlag: false,
                items       : [
                    {
                        icon: 'icon_ztgylc',
                        index: 'overallProcess',
                        title: '整体工艺流程',
                    },
                    {
                        icon: 'icon_dqzjx',
                        index: 'dqzjx',
                        title: '电气主接线',
                    },
                    {
                        icon: 'icon_sbjc',
                        index: 'sbjc',
                        title: '设备监测',
                        subs: [
                            {
                                icon: '',
                                index: 'zqxt',
                                title: '制氢系统'
                            },
                            {
                                icon: '',
                                index: 'rldc',
                                title: '燃料电池'
                            },
                            {
                                icon: '',
                                index: 'jqj',
                                title: '加氢机'
                            },
                            {
                                icon: '',
                                index: 'ysj',
                                title: '压缩机'
                            },
                            // {
                            //     icon: '',
                            //     index: 'nbq',
                            //     title: '逆变器'
                            // },
                            {
                                icon: '',
                                index: 'cqg',
                                title: '储气罐'
                            },
                        ]
                    },
                    {
                        icon: 'icon_ycgl',
                        index: 'ycgl',
                        title: '预测管理',
                    },
                    {
                        icon: 'icon_nlgl',
                        index: 'nlgl',
                        title: '能量管理',
                        subs: [
                            {
                                icon: '',
                                index: 'clgl',
                                title: '策略管理'
                            },
                            {
                                icon: '',
                                index: 'zzjhpz',
                                title: '组合计划配置'
                            },
                            {
                                icon: '',
                                index: 'jhqxpz',
                                title: '计划曲线配置'
                            },
                        ]
                    },
                    {
                        icon: 'icon_aqgl',
                        index: 'aqgl',
                        title: '安全管理',
                        subs: [
                            {
                                icon: '',
                                index: 'aqpg',
                                title: '安全评估'
                            },
                            {
                                icon: '',
                                index: 'zstp',
                                title: '知识图谱'
                            },
                            // {
                            //     icon: '',
                            //     index: 'ldcl',
                            //     title: '联动策略'
                            // },
                            {
                                icon: '',
                                index: 'gzzd',
                                title: '故障诊断'
                            },
                        ]
                    },
                    {
                        icon: 'icon_gjgl',
                        index: 'gjgl',
                        title: '告警管理',
                        subs: [
                            {
                                icon: '',
                                index: 'gjgzcx',
                                title: '告警故障查询'
                            },
                            {
                                icon: '',
                                index: 'gjgztjyfx',
                                title: '告警故障统计与分析'
                            },
                        ]
                    },
                    {
                        icon: 'icon_rzgl',
                        index: 'rzgl',
                        title: '日志管理',
                    },
                    // {
                    //     icon: 'icon_gzyq',
                    //     index: 'gzyq',
                    //     title: '规则引擎',
                    // },
                    {
                        icon: 'icon_sjtj',
                        index: 'sjtj',
                        title: '数据统计',
                        subs: [
                            {
                                icon: '',
                                index: 'sjyxqxcx',
                                title: '数据运行曲线查询',
                            },
                            {
                                icon: '',
                                index: 'bbsc',
                                title: '报表生成',
                            }
                        ]
                    },
                    {
                        icon: 'icon_sbgl',
                        index: 'sbgl',
                        title: '设备管理',
                    },
                    {
                        icon: 'icon_ywgl',
                        index: 'ywgl',
                        title: '运维管理',
                    },
                    {
                        icon: 'icon_xtgl',
                        index: 'xtgl',
                        title: '系统管理',
                        subs: [
                            {
                                icon: '',
                                index: 'tdgl',
                                title: '通道管理'
                            },
                            {
                                icon: '',
                                index: 'gzgl',
                                title: '规约管理'
                            },
                            {
                                icon: '',
                                index: 'xtycgl',
                                title: '遥测管理'
                            },
                            {
                                icon: '',
                                index: 'yxgl',
                                title: '遥信管理'
                            },
                            {
                                icon: '',
                                index: 'yhgl',
                                title: '用户管理'
                            },
                        ]
                    },
                ],
            }
        },
        computed: {
            onRoutes() {
                return this.$route.path.replace('/', '');
            }
        },
        methods: {
            /**
             * 侧边栏折叠
             */
            collapseClick(){
                this.collapseFlag = !this.collapseFlag;
                // bus.$emit('collapse-content', this.collapseFlag);
            },
        },
        mounted() {

        }
    }
</script>

<style lang="less">
    .menu_wrap {
        height: 100%;
        position: relative;
        overflow: unset !important;

        .el-menu {
            background-color: transparent;
            border: 0px;

            .el-submenu {

                >.el-submenu__title {


                }

                >.el-menu {

                    .el-menu-item {
                        padding-left: 70px !important;
                        font-size: 15px;
                    }
                }
            }

            .el-menu-item, .el-submenu__title {

                >span {
                    font-size: 15px;
                }
            }

            .el-menu-item.is-active {
                background-image: url("../assets/images/page/bg_meau_item_act.png");
                background-size: 100% 100%;
            }

            .el-menu-item:hover, .el-submenu__title:hover {
                background-color: transparent !important;
                opacity: 0.8;
                transition: opacity 0.3s;
            }

            .item-icon {
                display: inline-block;
                vertical-align: middle;
                width: 22px;
                height: 22px;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                margin-right: 9px;

                &.icon_ztgylc {
                    background-image: url("../assets/images/page/icon_ztgylc.png");
                }

                &.icon_dqzjx {
                    background-image: url("../assets/images/page/icon_dqzjx.png");
                }

                &.icon_sbjc {
                    background-image: url("../assets/images/page/icon_sbjc.png");
                }

                &.icon_ycgl {
                    background-image: url("../assets/images/page/icon_ycgl.png");
                }

                &.icon_nlgl {
                    background-image: url("../assets/images/page/icon_nlgl.png");
                }

                &.icon_aqgl {
                    background-image: url("../assets/images/page/icon_aqgl.png");
                }

                &.icon_gjgl {
                    background-image: url("../assets/images/page/icon_gjgl.png");
                }

                &.icon_rzgl {
                    background-image: url("../assets/images/page/icon_rzgl.png");
                }

                &.icon_gzyq {
                    background-image: url("../assets/images/page/icon_gzyq.png");
                }

                &.icon_sjtj {
                    background-image: url("../assets/images/page/icon_sjtj.png");
                }

                &.icon_sbgl {
                    background-image: url("../assets/images/page/icon_sbgl.png");
                }

                &.icon_ywgl {
                    background-image: url("../assets/images/page/icon_ywgl.png");
                }

                &.icon_xtgl {
                    background-image: url("../assets/images/page/icon_xtgl.png");
                }
            }

            .is-active {

                .item-icon {

                    &.icon_ztgylc {
                        background-image: url("../assets/images/page/icon_ztgylc_act.png");
                    }

                    &.icon_dqzjx {
                        background-image: url("../assets/images/page/icon_dqzjx_act.png");
                    }

                    &.icon_sbjc {
                        background-image: url("../assets/images/page/icon_sbjc_act.png");
                    }

                    &.icon_ycgl {
                        background-image: url("../assets/images/page/icon_ycgl_act.png");
                    }

                    &.icon_nlgl {
                        background-image: url("../assets/images/page/icon_nlgl_act.png");
                    }

                    &.icon_aqgl {
                        background-image: url("../assets/images/page/icon_aqgl_act.png");
                    }

                    &.icon_gjgl {
                        background-image: url("../assets/images/page/icon_gjgl_act.png");
                    }

                    &.icon_rzgl {
                        background-image: url("../assets/images/page/icon_rzgl_act.png");
                    }

                    &.icon_gzyq {
                        background-image: url("../assets/images/page/icon_gzyq_act.png");
                    }

                    &.icon_sjtj {
                        background-image: url("../assets/images/page/icon_sjtj_act.png");
                    }

                    &.icon_sbgl {
                        background-image: url("../assets/images/page/icon_sbgl_act.png");
                    }

                    &.icon_ywgl {
                        background-image: url("../assets/images/page/icon_ywgl_act.png");
                    }

                    &.icon_xtgl {
                        background-image: url("../assets/images/page/icon_xtgl_act.png");
                    }
                }
            }
        }

        .btn-shrink {
            position: absolute;
            right: -18px;
            top: 60px;
            z-index: 99;
        }

    }

    .el-menu--vertical {

        .el-menu {
            background-color: #ffffff !important;

            .el-menu-item {
                color: #303133 !important;
            }
        }
    }
</style>
